<template>
  <div class="my-travel-apply-page">
    <div class="content-area">
      <!-- 筛选 -->
      <van-dropdown-menu>
        <van-dropdown-item v-model="filterStatus" :options="statusOptions" />
        <van-dropdown-item v-model="sortType" :options="sortOptions" />
      </van-dropdown-menu>
      
      <!-- 申请列表 -->
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div class="application-list" v-if="travelApplies.length > 0">
            <div 
              v-for="item in travelApplies" 
              :key="item.id"
              class="application-card"
              @click="viewDetail(item)"
            >
              <div class="card-header">
                <div class="destination">
                  <van-icon name="location-o" />
                  <span>{{ item.destination }}</span>
                </div>
                <van-tag :type="getStatusType(item.status)" round>{{ item.statusText }}</van-tag>
              </div>
              <div class="card-body">
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">申请日期：</span>
                    <span>{{ item.applyDate }}</span>
                  </div>
                  <div class="info-item">
                    <span class="label">出差日期：</span>
                    <span>{{ item.startDate }} - {{ item.endDate }}</span>
                  </div>
                </div>
                <div class="info-row">
                  <div class="info-item">
                    <span class="label">出差事由：</span>
                    <span>{{ item.reason }}</span>
                  </div>
                </div>
                <div class="info-row" v-if="item.budget">
                  <div class="info-item">
                    <span class="label">预算金额：</span>
                    <span>¥ {{ item.budget }}</span>
                  </div>
                </div>
              </div>
              <div class="card-footer">
                <div class="actions">
                  <van-button 
                    size="small" 
                    type="primary" 
                    plain 
                    @click.stop="viewDetail(item)"
                  >
                    查看详情
                  </van-button>
                  <van-button 
                    v-if="item.status === 'pending'" 
                    size="small" 
                    type="danger" 
                    plain 
                    @click.stop="cancelApply(item)"
                  >
                    取消申请
                  </van-button>
                </div>
              </div>
            </div>
          </div>
          <van-empty v-else description="暂无出差申请记录" />
        </van-list>
      </van-pull-refresh>
      
      <!-- 底部悬浮按钮 -->
      <van-button 
        class="float-button" 
        type="primary" 
        icon="plus" 
        round 
        @click="navigateToApply"
      >
        新建申请
      </van-button>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { NavBar, DropdownMenu, DropdownItem, PullRefresh, List, Icon, Tag, Button, Empty, Dialog, Toast } from 'vant'
import 'vant/es/dialog/style'
import 'vant/es/toast/style'

export default {
  name: 'FinanceMyTravelApply',
  components: {
    vanNavBar: NavBar,
    vanDropdownMenu: DropdownMenu,
    vanDropdownItem: DropdownItem,
    vanPullRefresh: PullRefresh,
    vanList: List,
    vanIcon: Icon,
    vanTag: Tag,
    vanButton: Button,
    vanEmpty: Empty
  },
  setup() {
    const router = useRouter()
    
    // 筛选与排序
    const filterStatus = ref(0) // 默认全部
    const sortType = ref('time-desc') // 默认按时间倒序排列
    
    const statusOptions = [
      { text: '全部申请', value: 0 },
      { text: '审批中', value: 'pending' },
      { text: '已批准', value: 'approved' },
      { text: '已拒绝', value: 'rejected' },
      { text: '已取消', value: 'cancelled' }
    ]
    
    const sortOptions = [
      { text: '申请时间(新到旧)', value: 'time-desc' },
      { text: '申请时间(旧到新)', value: 'time-asc' },
      { text: '出差日期(近到远)', value: 'travel-desc' },
      { text: '出差日期(远到近)', value: 'travel-asc' }
    ]
    
    // 列表加载状态
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    
    // 模拟申请数据
    const travelApplies = ref([
      {
        id: 1,
        destination: '上海',
        applyDate: '2024-04-01',
        startDate: '2024-04-15',
        endDate: '2024-04-18',
        reason: '参加医疗器械展会',
        budget: '5000',
        status: 'pending',
        statusText: '审批中'
      },
      {
        id: 2,
        destination: '北京',
        applyDate: '2024-03-20',
        startDate: '2024-04-05',
        endDate: '2024-04-07',
        reason: '专业培训',
        budget: '3000',
        status: 'approved',
        statusText: '已批准'
      },
      {
        id: 3,
        destination: '广州',
        applyDate: '2024-03-01',
        startDate: '2024-03-15',
        endDate: '2024-03-17',
        reason: '医院管理交流会',
        budget: '4000',
        status: 'rejected',
        statusText: '已拒绝'
      }
    ])
    
    // 获取状态类型
    const getStatusType = (status) => {
      const types = {
        pending: 'warning',
        approved: 'success',
        rejected: 'danger',
        cancelled: 'default'
      }
      return types[status] || 'default'
    }
    
    // 加载更多数据
    const onLoad = () => {
      setTimeout(() => {
        loading.value = false
        finished.value = true // 模拟没有更多数据
      }, 1000)
    }
    
    // 下拉刷新
    const onRefresh = () => {
      finished.value = false
      loading.value = true
      
      setTimeout(() => {
        refreshing.value = false
        loading.value = false
        finished.value = true
      }, 1000)
    }
    
    // 查看详情
    const viewDetail = (item) => {
      router.push(`/new/finance/travel/detail/${item.id}`)
    }
    
    // 取消申请
    const cancelApply = (item) => {
      Dialog.confirm({
        title: '取消申请',
        message: `确定要取消前往${item.destination}的出差申请吗？`,
      })
        .then(() => {
          // 模拟取消申请
          const index = travelApplies.value.findIndex(apply => apply.id === item.id)
          if (index !== -1) {
            travelApplies.value[index].status = 'cancelled'
            travelApplies.value[index].statusText = '已取消'
            Toast.success('申请已取消')
          }
        })
        .catch(() => {
          // 取消操作
        })
    }
    
    // 导航到申请页面
    const navigateToApply = () => {
      router.push('/new/finance/travel/apply')
    }
    
    const goBack = () => router.back()
    
    return {
      filterStatus,
      sortType,
      statusOptions,
      sortOptions,
      loading,
      finished,
      refreshing,
      travelApplies,
      getStatusType,
      onLoad,
      onRefresh,
      viewDetail,
      cancelApply,
      navigateToApply,
      goBack
    }
  }
}
</script>

<style scoped>
.my-travel-apply-page {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 80px; /* 为悬浮按钮留出空间 */
}
.content-area {
  position: relative;
}
.application-list {
  padding: 12px;
}
.application-card {
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #f2f2f2;
}
.destination {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}
.destination .van-icon {
  margin-right: 4px;
  color: #1989fa;
}
.card-body {
  padding: 12px;
}
.info-row {
  margin-bottom: 8px;
}
.info-row:last-child {
  margin-bottom: 0;
}
.info-item {
  margin-bottom: 4px;
}
.label {
  color: #646566;
}
.card-footer {
  padding: 12px;
  border-top: 1px solid #f2f2f2;
}
.actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.float-button {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 9;
}
</style> 